<template>
  <div class="pending-page">
    <div class="container">
      <!-- 顶部进度条 -->
      <div class="steps">
        <div v-for="(s,i) in steps" :key="i" class="step" :class="{active: i < 2}">
          <div class="dot">{{ i+1 }}</div>
          <div class="name">{{ s }}</div>
          <div v-if="i<steps.length-1" class="line"/>
        </div>
      </div>

      <div class="card">
        <div class="title">
          <span class="index">1</span>
          <span>审批结果</span>
        </div>

        <div class="center">
          <div class="icon">!</div>
          <div class="status">审批中</div>
          <div class="tip">稍等，退住申请单正在审批中，若该申请单长时间未处理，请联系（退住审批员）！</div>
        </div>

        <div class="sub-card">
          <div class="sub-title">操作记录</div>
          <div class="log">
            <div class="log-item">
              <div class="avatar"/>
              <div class="info">
                <div>护理员a发起申请</div>
                <div class="sub">护理员a（已发起）</div>
              </div>
              <div class="time">{{ submitTime }}</div>
            </div>
            <div class="log-item">
              <div class="avatar"/>
              <div class="info">
                <div>（{{ approvalRole }}）审批·申请审批</div>
                <div class="sub">{{ approverName }}（审批中）</div>
              </div>
            </div>
          </div>
        </div>

        <div class="actions">
          <el-button @click="$router.back()">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const steps = ['申请退住','申请审批','解除合同','调整账单','账单审批','退住审批','费用清算']

// 审批信息
const applicantName = ref('') // 发起申请人（护理员名字）
const submitTime = ref('') // 提交时间
const approvalRole = ref('退住审批员') // 审批角色（固定）
const approverName = ref('') // 审批人名字（暂时为空，审批中）

// 页面加载时获取数据
onMounted(() => {
  // 从 sessionStorage 获取提交的数据
  const checkoutData = sessionStorage.getItem('checkout_approval_data')
  console.log('审批页面加载，sessionStorage数据:', checkoutData)
  
  if (checkoutData) {
    const data = JSON.parse(checkoutData)
    console.log('解析后的数据:', data)
    
    applicantName.value = data.applicantName || '未知'
    submitTime.value = data.submitTime || '未知时间'
    approverName.value = data.approverName || ''
    
    console.log('设置后的值:')
    console.log('- 申请人:', applicantName.value)
    console.log('- 提交时间:', submitTime.value)
    console.log('- 审批人:', approverName.value)
  } else {
    console.warn('未找到审批数据，请先提交申请或从列表查看')
  }
})
</script>

<style scoped>
.pending-page{background:#f5f6f8;min-height:100vh}
.container{max-width:1180px;margin:0 auto;padding:14px 12px}
.steps{display:flex;align-items:center;padding:6px 0 16px}
.step{display:flex;align-items:center;color:#a8abb2}
.dot{width:24px;height:24px;border-radius:50%;border:2px solid #dcdfe6;display:flex;align-items:center;justify-content:center;margin-right:6px}
.step.active .dot{border-color:#409eff;color:#409eff}
.name{margin-right:8px}
.line{width:56px;height:1px;background:#e9eaef;margin:0 8px}
.card{background:#fff;border:1px solid #ebeef5;border-radius:4px;padding:12px 16px}
.title{display:flex;align-items:center;font-weight:600;color:#303133}
.index{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#ff5b5b;color:#fff;font-size:12px;margin-right:8px}
.center{padding:36px 0;text-align:center;color:#606266}
.center .icon{width:54px;height:54px;border-radius:50%;border:2px solid #bbb;color:#909399;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:8px}
.center .status{font-size:16px;color:#303133;font-weight:600;margin-bottom:4px}
.sub-card{max-width:520px;margin:0 auto 10px}
.sub-title{font-weight:600;margin:6px 0 8px}
.log-item{display:flex;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #f0f0f0}
.log-item:last-child{border-bottom:none}
.avatar{width:18px;height:18px;border-radius:50%;background:#c0c4cc;margin-right:8px;margin-top:3px}
.info .sub{font-size:12px;color:#909399}
.time{margin-left:auto;color:#909399;font-size:12px}
.actions{text-align:center;padding:10px 0}
</style>



